{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"专题详情",back:1} %}

    <div class="top bc1 c13 padl5 padr5 padt10 padb20">
        <div class="fs12">[[topic.title]]</div>
        <div class="fs10 padl7">共[[topic.videoNum]]讲，每讲[[topic.videoTime]]分钟</div>
        <div class="flex-r flex-start pad10">
            <div class="userHead2"> <img class="userHead2 round" :src="root + teacher.pic" alt="" onerror="this.src=pic404"></div>
            <div class="flex1 pad10">
                <div>授课：[[teacher.name]]</div>
                <div class="op8 fs8">
                    介绍：[[teacher.intro]]
                </div>
            </div>
        </div>
    </div>
    <div class="pos-r bcf">
        <div class="mainBox pos-r bcf ">
            <div class="flex-r flex-end padt10 bdbso">
                <div class="flex1 cf">&nbsp;</div>
                <div class="padl10 padr10 pos-r bdc1 bdw5 " :class="curTab == 0? 'bdbso':''" @click="tab(0)"><mu-ripple>课程列表</mu-ripple></div>
                <div class="flex1">&nbsp;</div>
                <div class="padl10 padr10 pos-r bdc1 bdw5 " :class="curTab == 1? 'bdbso':''" @click="tab(1)"><mu-ripple>专题详情</mu-ripple></div>
                <div class="flex1">&nbsp;</div>
            </div>
            <div class="" v-show="curTab == 0">
                <div class="mar10 shadow3 round5 pad10 flrc" v-for="item in list">
                    <div class="flex1 ">
                        <div class="c12 fs8">[[item.miniTitle]]</div>
                        <div class="padb20 ofe">[[item.title]]</div>
                        <div class="bc1 c13 inlineBlock padl5 padr5 round10">
                            <span class="fs6">难度</span>
                            <span class="fa fa-star padl2 padr2" v-for="i in item.star*1"></span>
                        </div>
                    </div>
                    <div>
                        {#免费播放#}
                        <div v-if="item.playType == 1" class="userHead1 bc13 flcc c12 round fs8">免费</div>

                        {#试听#}
                        <div v-if="item.playType == 2" class="userHead1 bc13 flcc red round fs16">试听</div>

                        {#正常播放#}
                        {#<div v-if="item.playType == 4" @click="play(item.url,item.title)" class="userHead1 bc13 flcc red round fs16"><span class="c1 fa fa-play-circle "></span></div>#}
                        <div v-if="item.playType == 4" @click="goto('play',{url:item.url,id:topic.id,title:item.title,cur:item.id})" class="userHead1 bc13 flcc red round fs16"><span class="c1 fa fa-play-circle "></span></div>

                        {#尚未成为VIP#}
                        <div v-if="item.playType == 3" class="userHead1 bc13 flcc red round fs8">付费</div>
                    </div>
                </div>
            </div>
            <div class="pad10" v-show="curTab == 1">
                <div v-html="topic.content"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block myJs %}
{% endblock %}